<template>
<div class="liwu">
    <div class="shop">    
        <div v-if="this.titles == 1">
                <van-card class="shopinfo"  v-for="(item,value) in list" :key="value" >
                                <!-- 标题 -->
                                <!-- 第二页显示第二个 -->
                                    <van-button slot="title" type="primary" class="nvshi">{{item.title}}</van-button>                                                      
                                    <p slot="desc" class="shop-desc">{{item.info}}</p>
                                    <p slot="tags" class="shop-tags">{{item.tabs}}</p>
                                    <span slot="price" class="shop-price">{{item.prive}}</span>
                                    <div slot="num" class="shop-num">
                                        <i class="iconfont iconLikeIcon"></i>
                                        <span  class="shop-nums">{{item.num}}</span>  
                                    </div>                                                                      
                                    <van-image  slot="thumb" :src="item.img"  fit="cover" class="shop-logo"/>                                                                                                                     -->
                </van-card>       
        </div>
        <div v-if="this.titles == 3">
             <van-card class="shopinfo shopinfo-a3"  v-for="(item,value) in list" :key="value" >
                                <!-- 标题 -->
                                <!-- 第二页显示第二个 -->
                                    <van-button slot="title" type="primary" class="nvshi-a2">{{item.title}}</van-button>                                                      
                                    <p slot="desc" class="shop-desc">{{item.info}}</p>
                                    <p slot="tags" class="shop-tags">{{item.tabs}}</p>
                                    <span slot="price" class="shop-price-a2">{{item.prive}}</span>
                                    <div slot="num" class="shop-num">
                                        <i class="iconfont iconLikeIcon"></i>
                                        <span  class="shop-nums">{{item.num}}</span>  
                                    </div>                                                                      
                                    <van-image  slot="thumb" :src="item.img"  fit="cover" class="shop-logo"/>                                                                                                                     -->
                </van-card>       
        </div> 
         <div v-if="this.titles == 4">
             <van-card class="shopinfo shopinfo-a4"  v-for="(item,value) in list" :key="value" >
                                <!-- 标题 -->
                                <!-- 第二页显示第二个 -->
                                    <van-button slot="title" type="primary" class="nvshi-a4">{{item.title}}</van-button>                                                      
                                    <p slot="desc" class="shop-desc">{{item.info}}</p>
                                    <p slot="tags" class="shop-tags">{{item.tabs}}</p>
                                    <span slot="price" class="shop-price-a4">{{item.prive}}</span>
                                    <div slot="num" class="shop-num">
                                        <i class="iconfont iconLikeIcon"></i>
                                        <span  class="shop-nums">{{item.num}}</span>  
                                    </div>                                                                      
                                    <van-image  slot="thumb" :src="item.img"  fit="cover" class="shop-logo"/>                                                                                                                     -->
                </van-card>       
        </div>                   
                            <!-- <van-card class="shopinfo"> -->
                            <!-- 标题
                                <van-button slot="title" type="primary" class="nvshi">女士用</van-button>                                                      
                                <p slot="desc" class="shop-desc">米色陶瓷花瓶</p>
                                <p slot="tags" class="shop-tags">自然清新的意境</p>
                                <span slot="price" class="shop-price">￥59.0</span>
                                <div slot="num" class="shop-num">
                                    <i class="iconfont iconLikeIcon"></i>
                                    <span  class="shop-nums">459</span>  
                                </div>                                
                                <van-image  slot="thumb" :src="require('@/assets/500523758_banner.png')"  fit="cover" class="shop-logo"/>                                                                                                      
                            </van-card>
                            <van-card class="shopinfo"> -->
                            <!-- 标题 -->
                                <!-- <van-button slot="title" type="primary" class="nvshi">女士用</van-button>                                                      
                                <p slot="desc" class="shop-desc">概念笔记本</p>
                                <p slot="tags" class="shop-tags">我的生活故事书</p>
                                <span slot="price" class="shop-price">￥59.0</span>
                                <div slot="num" class="shop-num">
                                    <i class="iconfont iconLikeIcon"></i>
                                    <span  class="shop-nums">998</span>  
                                </div>                                
                                <van-image  slot="thumb" :src="require('@/assets/500113977_banner copy.png')"  fit="cover" class="shop-logo"/>                                                                                                      
                            </van-card>
                            <van-card class="shopinfo"> -->
                            <!-- 标题 -->
                                <!-- <van-button slot="title" type="primary" class="nvshi">女士用</van-button>                                                      
                                <p slot="desc" class="shop-desc">简单典雅的手表</p>
                                <p slot="tags" class="shop-tags">时光流逝</p>
                                <span slot="price" class="shop-price">￥59.0</span>
                                <div slot="num" class="shop-num">
                                    <i class="iconfont iconLikeIcon"></i>
                                    <span  class="shop-nums">228</span>  
                                </div>                                
                                <van-image  slot="thumb" :src="require('@/assets/500642258_banner.png')"  fit="cover" class="shop-logo"/>                                                                                                      
                            </van-card>
                            <van-card class="shopinfo"> -->
                            <!-- 标题 -->
                                <!-- <van-button slot="title" type="primary" class="nvshi">女士用</van-button>                                                      
                                <p slot="desc" class="shop-desc">米色陶瓷花瓶</p>
                                <p slot="tags" class="shop-tags">自然清新的意境</p>
                                <span slot="price" class="shop-price">￥59.0</span>
                                <div slot="num" class="shop-num">
                                    <i class="iconfont iconLikeIcon"></i>
                                    <span  class="shop-nums">459</span>  
                                </div>                                
                                <van-image  slot="thumb" :src="require('@/assets/500478380_banner.png')"  fit="cover" class="shop-logo"/>                                                                                                      
                            </van-card> -->
    </div>
    </div>
</template>
<script>
export default {
    data:function(){
        return {
            list:[]
        }
    },
    props:(['titles']),
    methods:{
        // getlis(){
        //    
        // },
        onLoad() {
                this.list = this.$store.state.list             
        }
    },
    created(){
        this.onLoad() 
    }
}
</script>
<style lang="less">
        .nvshi-a2{
                   width: 126px;
                        height: 40px;
                        background-color: #6172e7;
                        border: none;
                        border-radius: 20px;
                        font-size: 24px;
                        color: #ffffff;
                        margin-bottom: 5px;
                        margin-top: 13px;     
        }
        .nvshi-a4{
             width: 126px;
                        height: 40px;
                        background-color: #e26593;
                        border: none;
                        border-radius: 20px;
                        font-size: 24px;
                        color: #ffffff;
                        margin-bottom: 5px;
                        margin-top: 13px;    
        }
        .shop-price-a2{
            color:  #6172e7;
        }
        .shop-price-a4{
           color:  #65b3e2; 
        }
        .liwu{
                .van-card:not(:first-child){
                    margin-top: 20px;
                }
                .van-card{
                    padding: 52px 50px 50px 24px;
                    background: #f7fbff;
                 }
                 .shopinfo-a3{
                    padding: 52px 50px 50px 24px;
                    background: #f7f8ff;
                 }
                 .shopinfo-a4{
                    padding: 52px 50px 50px 24px;
                    background: #fefafc;
                 }
                .shopinfo{
                    .van-card__thumb{
                        margin-right: 32px;
                    }
                    .van-card__thumb img{
                        border-radius: 0px;
                    }
                    .nvshi{
                        width: 126px;
                        height: 40px;
                        background-color: #4a90e2;
                        border: none;
                        border-radius: 20px;
                        font-size: 24px;
                        color: #ffffff;
                        margin-bottom: 5px;
                        margin-top: 13px;
                    }
                    .van-button--normal{
                        padding: 0px;
                    }
                    .shop-desc{
                        font-size: 24px;
                        font-weight: normal;
                        font-stretch: normal;
                        letter-spacing: 0px;
                        color: #313131;
                        margin-bottom: 2px;
                    }
                    .shop-tags{              
                        height: 20px;
                        font-size: 20px;
                        font-weight: normal;
                        font-stretch: normal;
                        letter-spacing: 0px;
                        color: #aeaeae;
                    }
                    .shop-price{
                        font-size: 22px;
                        font-weight: normal;
                        font-stretch: normal;
                        letter-spacing: 0px;
                        color: #4da1dd;
                    }
                    .shop-num{
                       .iconLikeIcon{
                            font-size: 24px;
                            color: #a6a6b0;
                            padding-right:  5px;
                        }
                        .shop-nums{
                            font-size: 20px;
                            height: 16px;
                            font-weight: normal;
                            font-stretch: normal;
                            letter-spacing: 0px;
                            color: #a6a6b0;
                        }
                    }
                   
                    .shop-logo{
                        width: 170px;
                        height: 170px;
                    }    
              }
                   
            }
</style>
